<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="22">
            <el-form-item label="模板代码" prop="id">
              <el-input v-model="form.id" name="id" disabled>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="22">
            <el-form-item label="请求参数" prop="note" style="width: 100%;">
              <sc-form-table  v-model="form.extData.filters" drag-sort :addTemplate="addTemplate">
                <el-table-column width="210" align="center" label="显示名称">
                  <template #default="scope">
                    <el-input v-model="scope.row.fieldName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="210" align="center" label="字段名称">
                  <template #default="scope">
                    <el-input v-model="scope.row.javaName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="130" align="center" label="字段类型">
                  <template #default="scope">
                    <el-select
                        v-model="scope.row.fieldType"
                        placeholder="选择类型"
                    >
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column width="160" align="center" label="是否必传">
                  <template #default="scope">
                    <el-radio-group v-model="scope.row.required">
                      <el-radio-button label="必传" value="1"/>
                      <el-radio-button label="非必传" value="2"/>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column width="130" align="center" label="显示区域">
                  <template #default="scope">
                    <el-select v-model="scope.row.area" clearable placeholder="显示区域">
                      <el-option label="接口调用" :value="1"/>
                      <el-option label="主搜索" :value="2"/>
                      <el-option label="扩展搜索" :value="3"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="接口地址">
                  <template #default="scope">
                    <el-input v-model="scope.row.queryUrl" :disabled="scope.row.area!==3"></el-input>
                  </template>
                </el-table-column>
              </sc-form-table>
              <el-button @click="addFilter" style="margin-top: 15px;">添加过滤字段</el-button>
              <el-button @click="copyFilter" style="margin-top: 15px;">复制过滤字段</el-button>
              <el-button @click="pasteFilter" style="margin-top: 15px;">粘贴过滤字段</el-button>

            </el-form-item>

          </el-col>

          <el-col :span="22">
            <el-form-item label="查询类型" prop="id">
              <el-radio-group v-model="form.queryType">
                <el-radio-button label="分页" :value="1"/>
                <el-radio-button label="列表" :value="2"/>
                <el-radio-button label="批量查询" :value="3"/>

              </el-radio-group>
            </el-form-item>

          </el-col>
          <el-col :span="22" v-if="form.queryType===1||form.queryType===2">
            <el-form-item label="后台java映射类" prop="content">
              <el-input v-model="form.className">
                <template #append>
                  <el-button @click="querySql">获取sql语句</el-button>
                </template>
              </el-input>

            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="form.queryType===1||form.queryType===2">
            <el-form-item label="查询sql语句" prop="content">
              <scCodeEditor v-model="form.content" name="content" mode="sql" style="width: 100%;height: auto">
              </scCodeEditor>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="form.queryType===3">
            <el-form-item label="查询执行类型" prop="id">
              <el-radio-group v-model="form.sqlBatchObject.execType">
                <el-radio-button label="串行查询" :value="1"/>
                <el-radio-button label="并行查询" :value="2"/>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="form.queryType===3">
            <el-form-item label="批量查询" prop="content">
              <el-table :data="form.sqlBatchObject.sqlObjects" style="width: 100%;">
                <el-table-column label="查询名称" prop="label" width="160">
                  <template #default="scope">
                    <el-input v-model="scope.row.label"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="变量名称" prop="varName" width="160">
                  <template #default="scope">
                    <el-input v-model="scope.row.varName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="查询类型" prop="varName" width="160">
                  <template #default="scope">
                    <el-select v-model="scope.row.queryType" clearable placeholder="显示区域">
                      <el-option label="分页" :value="1"/>
                      <el-option label="列表" :value="2"/>
                      <el-option label="统计" :value="3"/>
                      <el-option label="单对象" :value="4"/>
                      <el-option label="单值" :value="5"/>
                      <el-option label="执行sql" :value="6"/>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="查询代码" prop="sql">
                  <template #default="scope">
                    <scCodeEditor v-model="scope.row.sql" name="content" mode="sql" style="width: 100%;height: auto">
                    </scCodeEditor>
                  </template>
                </el-table-column>
                <el-table-column width="80" align="center" fixed="right" label="操作">
                  <template #default="scope">
                    <el-button text class="operation_bt" type="danger" style="cursor: pointer;"
                               @click="deleteQuery(scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-button @click="addQuery" style="margin-top: 15px;">添加查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="模板类型" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio :value="1">公共查询</el-radio>
                <el-radio :value="2">私有查询</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22" v-if="form.type===2">
            <el-form-item label="权限标记" prop="permission">
              <el-input v-model="form.permission" name="permission"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="模板描述" prop="note">
              <el-input v-model="form.note" name="note" type="textarea"></el-input>
            </el-form-item>

          </el-col>


          <el-col :span="22">
            <el-form-item>
              <el-button @click="goBack">取消</el-button>
              <el-button type="primary" @click="updateData">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {defineAsyncComponent, ref} from "vue";
import {useUpdate} from "@/uses/useUpdate";
import http from "@/utils/request";
import {ElMessage} from "element-plus";
import scFormTable from "@/components/scFormTable/index.vue";
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor/index.vue'));
const addTemplate=ref({
  fieldName: null,
  javaName: null,
  fieldType: null
})
const form = ref({
  id: '',
  name: '',
  content: '',
  type: '',
  note: '',
  className:null,
  queryType:null,
  permission:null,
  extData: {
    filters: []
  }
})

const options = ref([
  {
    label: "字符串",
    value: 1
  },
  {
    label: "字符输入",
    value: 101
  },
  {
    label: "整型",
    value: 2
  },
  {
    label: "长整型",
    value: 3
  },
  {
    label: "浮点数",
    value: 4
  },
  {
    label: "对象",
    value: 9
  },
  {
    label: "字符数组",
    value: 10
  },
  {
    label: "整形数组",
    value: 11
  },
  {
    label: "小数数组",
    value: 12
  },
  {
    label: "BigDecimal",
    value: 5
  },
  {
    label: "日期",
    value: 6
  },
  {
    label: "布尔",
    value: 7
  },
  {
    label: "枚举",
    value: 8
  }

])


const rules = ref({
  id: [
    {required: true, message: '请输入模板代码', trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入模板名称', trigger: 'blur'}
  ],
})

const ruleForm = ref(null);

const addFilter = () => {
  if (!form.value.extData) {
    form.value.extData = {};
  }
  if (!form.value.extData.filters) {
    form.value.extData.filters = [];
  }
  form.value.extData.filters.push({
    fieldName: null,
    javaName: null,
    fieldType: null
  })
}
const addQuery = () => {
  if (!form.value.sqlBatchObject) {
    form.value.sqlBatchObject = {};
  }
  if (!form.value.sqlBatchObject.sqlObjects) {
    form.value.sqlBatchObject.sqlObjects = [];
  }
  form.value.sqlBatchObject.sqlObjects.push({
    label: "",
    sql: "",
    queryType: "",
    varName: ""
  })
}
const deleteQuery=(row)=>{
  form.value.sqlBatchObject.sqlObjects.splice(row, 1);
}
const deleteData = (row) => {
  form.value.extData.filters.splice(row, 1);
}

const {updateData, goBack} = useUpdate("queryTemplate", form, ruleForm, () => {
  if (!form.value.extData) {
    form.value.extData = {};
  }
  if (!form.value.extData.filters) {
    form.value.extData.filters = [];
  }
  if (!form.value.sqlBatchObject) {
    form.value.sqlBatchObject = {};
  }


})

const querySql=async ()=>{
 let res= await http.post("/queryTemplate/query",{
   className:form.value.className,
   alias:"model"
  })

  if (res.code===200){
    form.value.content=res.data;
  }
}

const  copyFilter=()=>{
  if (form.value.extData.filters.length>0){
    //json话过滤参数 复制到剪贴板上
    let json=JSON.stringify(form.value.extData.filters);
    navigator.clipboard.writeText(json).then(function() {
      ElMessage({
        message: '复制成功',
        type: 'success',
      })
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
}

const pasteFilter=()=>{
  navigator.clipboard.readText().then(function(clipText) {
    form.value.extData.filters=[... form.value.extData.filters,... JSON.parse(clipText)];
    ElMessage({
      message: '粘贴成功',
      type: 'success',
    })
  });
}

</script>

<style scoped>

</style>